<template>
  <div>
    <tableComponents :pagination="{ currentPage, pageSize, total: list.all_num }" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" @sendUserSearch="getSearch" :searchData="userSearchData" :isHaveExport="false" @toAdd="showEditDialog">
      <template v-slot:headRight>
        <div>
          <div class="fx head-right-icon" @click="toControl()">
            <p><i class="el-icon-s-help"></i>&nbsp;&nbsp;自营调度中心</p>
          </div>
        </div>
      </template>
      <template v-slot:searchBottom>
        <el-form class="search_prod search_prod1" label-width="94px">
          <el-form-item label="审核状态">
            <el-row class="tl mar_bottom_15">
              <el-radio-group v-model="is_check" size="small" class="tl money-group" @change="reload">
                <el-radio-button label=""> 全部 </el-radio-button>
                <el-radio-button label="0"> 待审核 </el-radio-button>
                <el-radio-button label="1"> 审核通过 </el-radio-button>
                <el-radio-button label="2"> 审核驳回 </el-radio-button>
              </el-radio-group>
            </el-row>
          </el-form-item>
          <!-- <el-form-item label="店铺类型">
            <el-row class="tl mar_bottom_15">
              <el-radio-group
                v-model="is_sid"
                size="small"
                class="tl money-group"
                @change="reload"
              >
                <el-radio-button label=""> 全部 </el-radio-button>
                <el-radio-button label="0"> 直营店 </el-radio-button>
                <el-radio-button label="1"> 加盟店 </el-radio-button>
              </el-radio-group>
            </el-row>
          </el-form-item> -->
        </el-form>
      </template>
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list.data" v-loading="loading" header-row-class-name="head_color" stripe tooltip-effect="dark" style="width: 99.9%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" class="tc" width="35"></el-table-column>

          <el-table-column label="封面图" min-width="100">
            <template slot-scope="scope">
              <img width="100px" height="100px" style="object-fit: fill" :src="$fnc.getImgUrl(scope.row.piclink)" />
            </template>
          </el-table-column>

          <el-table-column label="店铺信息" min-width="100">
            <template slot-scope="scope">
              <div class="tab_div">
                <p><b>店铺名称：</b>{{ scope.row.title }}</p>
                <p><b>联系姓名：</b>{{ scope.row.name }}</p>
                <p><b>联系电话：</b>{{ scope.row.tel }}</p>
                <p><b>营业时间：</b>{{ scope.row.business_hours }}</p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="地址信息" min-width="160">
            <template slot-scope="scope">
              <div class="tab_div">
                <p>
                  <b>地区：</b>
                  {{ scope.row.province + scope.row.city + scope.row.area }}
                </p>
                <p><b>地址：</b>{{ scope.row.add }}</p>
                <p>
                  <b>经纬度：</b>{{ scope.row.latitude }}/{{
                    scope.row.longitude
                  }}
                </p>
              </div>
            </template>
          </el-table-column>

          <!-- <el-table-column label="店铺类型" min-width="120">
            <template slot-scope="scope">
              <div
                class="fx"
                style="justify-content: flex-start"
                v-if="scope.row.sid > 0"
              >
                <div class="tc" style="margin-right: 20px">
                  <img
                    style="width: 50px; height: 50px"
                    :src="imgError(scope.row.s_avatar)"
                    class="user_img"
                  />
                </div>
                <div class="user_table">
                  <p>
                    <span>账号/手机号：</span>
                    <small>{{ scope.row.s_username || "---" }}</small>
                  </p>
                  <p>
                    <span>昵称：</span>
                    <small>{{ scope.row.s_nickname || "---" }}</small>
                  </p>
                </div>
              </div>
              <div class="user_table" v-else>直营店</div>
            </template>
          </el-table-column> -->

          <el-table-column label="所属店长" min-width="180">
            <template slot-scope="scope">
              <div class="fx" style="justify-content: flex-start" v-if="scope.row.uid > 0">
                <div class="tc" style="margin-right: 20px">
                  <img style="width: 50px; height: 50px" :src="imgError(scope.row.avatar)" class="user_img" />
                </div>
                <div class="user_table">
                  <p>
                    <span>账号/手机号：</span>
                    <small>{{ scope.row.username || "---" }}</small>
                  </p>
                  <p>
                    <span>昵称：</span>
                    <small>{{ scope.row.nickname || "---" }}</small>
                  </p>
                </div>
              </div>
              <div class="user_table" v-else>暂未关联</div>
            </template>
          </el-table-column>

          <el-table-column label="股东" min-width="100" v-if="
              ($store.state.plugin.gxgd &&
                $store.state.plugin.gxgd.is_open == 1) ||
              ($store.state.plugin.qyyy &&
                $store.state.plugin.qyyy.is_open == 1)
            ">
            <template slot-scope="scope">
              <div class="tab_div">
                <el-tag size="small" effect="dark" @click="showShareholder(scope.row.shareholder)">查看</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="审核状态" min-width="100">
            <template slot-scope="scope">
              <div class="tab_div">
                <el-tag type="warning" v-if="scope.row.is_check == 0" effect="dark" size="small">审核中</el-tag>
                <el-tag type="success" v-else-if="scope.row.is_check == 1" effect="dark" size="small">审核通过</el-tag>
                <el-tag type="danger" v-else-if="scope.row.is_check == 2" effect="dark" size="small">驳回</el-tag>
              </div>
              <div class="tab_div" v-if="scope.row.remark">
                <b>备注：</b>{{ scope.row.remark || "----" }}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="180">
            <template slot-scope="scope">
              <el-button :loading="$store.state.isLoading" type="warning" size="mini" @click="shoeEditArea(scope.row)">
                设置区域</el-button>
              <el-button :loading="$store.state.isLoading" type="success" size="mini" @click="toControl(scope.row.id)">
                调度中心</el-button>
              <el-button :loading="$store.state.isLoading" type="primary" size="mini" @click="showStaff(scope.row.id)">
                查看员工</el-button>
              <br />
              <el-button :loading="$store.state.isLoading" type="primary" size="mini" @click="showEditDialog(scope.row.id)">
                编辑
              </el-button>
              <el-button :loading="$store.state.isLoading" size="mini" @click="editbtn(scope.row)" type="warning" v-if="scope.row.is_check == 0">
                审核
              </el-button>
              <el-button :loading="$store.state.isLoading" size="mini" @click="deleteNew(scope.row.id)" type="danger">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-slot:footerLeft>
        <a class="aBtn aBtn_1 aBtn_lan2" @click="delSelection">删除</a>
      </template>
    </tableComponents>

    <ExtractEdit @parent="reload" :show.sync="myshow" :editId="editId" :clickNum="clickNum"></ExtractEdit>
    <ExtractArea ref="ExtractArea"></ExtractArea>

    <el-dialog :close-on-click-modal="false" title="编辑" class="tl size_13" width="800px" :visible.sync="dialogFormVisible">
      <el-form :model="checkform" ref="form" label-width="120px">
        <el-form-item label="审核：">
          <el-col :span="14">
            <el-radio-group v-model="checkform.is_check" :disabled="checkform.is_check == 1 || checkform.is_check == 2">
              <el-radio label="0">未审核</el-radio>
              <el-radio label="1">已审核</el-radio>
              <el-radio label="2">驳回</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="备注：">
          <el-col :span="12">
            <el-input type="textarea" v-model="checkform.remark"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" type="primary" @click="editrider(checkform)">编 辑</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="门店员工" :modal-append-to-body="false" :visible.sync="show_staff" class="tl size_13" width="800px">
      <el-table ref="multipleTable" :data="staff_list" stripe tooltip-effect="dark" style="width: 99%">
        <el-table-column label="员工姓名" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="联系方式" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.tel }}
          </template>
        </el-table-column>
        <el-table-column label="入职时间" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.entry_time | getTimeFormat2 }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="股东" :modal-append-to-body="false" :visible.sync="show_shareholder" class="tl size_13" width="800px">
      <el-table ref="multipleTable" :data="shareholder_list" stripe tooltip-effect="dark" style="width: 99%">
        <el-table-column label="股东信息" min-width="160">
          <template slot-scope="scope">
            <div class="fx" style="justify-content: flex-start">
              <div class="tc" style="margin-right: 20px">
                <img style="width: 50px; height: 50px" :src="imgError(scope.row.avatar)" class="user_img" />
              </div>
              <div class="user_table">
                <p>
                  <span>账号/手机号：</span>
                  <small>{{ scope.row.username || "---" }}</small>
                </p>
                <p>
                  <span>昵称：</span>
                  <small>{{ scope.row.nickname || "---" }}</small>
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.is_shareholder == 1 ? "单店股东" : "全量股东" }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import ExtractEdit from "@/components/mail/extract_edit.vue";
import ExtractArea from "@/components/mail/extract_area.vue";
import { extractSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: extractSearchData,
      dialogFormVisible: false,
      checkform: {},
      searchAll: {},
      show: false,
      myshow: false,
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      editId: "",
      multipleSelection: "",
      visible: false,
      clickNum: 1,
      is_sid: this.$route.query.is_sid || "",
      is_check: this.$route.query.is_check || "",
      staff_list: [],
      show_staff: false,
      shareholder_list: [],
      show_shareholder: false,
    };
  },
  components: {
    ExtractEdit,
    ExtractArea,
  },
  methods: {
    toControl(id) {
      var url = "";
      if (id) {
        url = "/index/mail/extract_control?id=" + id;
      } else {
        url = "/index/mail/extract_control";
      }
      this.$store.commit("addbreadcrumbs", {
        title: "调度中心",
        url: url,
      });
      this.$router.push(url);
    },
    shoeEditArea(item) {
      this.$refs.ExtractArea.init(item);
    },
    showShareholder(val) {
      this.shareholder_list = val;
      this.show_shareholder = true;
    },
    showStaff(id) {
      this.$store.commit("addbreadcrumbs", {
        title: "员工管理",
        url: "/index/operate_staff/staff_lists?extract_id=" + id,
      });
      this.$router.push({
        path: "/index/operate_staff/staff_lists?extract_id=" + id,
      });
    },
    editrider(item) {
      var params = item;
      this.$api.getUser.extractcheck(params).then((res) => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess(res.data.result);
          this.getNewsAll();
          this.dialogFormVisible = false;
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    editbtn(item) {
      var arr = JSON.parse(JSON.stringify(item));
      this.checkform = {
        id: arr.id,
        is_check: arr.is_check,
        remark: arr.remark,
      };
      this.dialogFormVisible = true;
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll();
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      if (item.indexOf("http") >= 0) {
        return item;
      } else {
        return "/api/" + item;
      }
    },
    showAddDialog() {
      this.show = true;
    },
    getNewsAll(page, page_size) {
      this.loading = true;
      page = page || 1;
      page_size = page_size || 10;
      var data = this.searchAll || {};
      data.page = page;
      data.page_size = page_size;
      if (this.is_sid) {
        data.is_sid = this.is_sid;
      }
      if (this.is_check) {
        data.is_check = this.is_check;
      }
      this.$api.getUser.getExtractList(data).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.getNewsAll("", val);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.getNewsAll(val, this.pageSize);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delSelection() {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var str = "";
          for (var i in this.multipleSelection) {
            str += this.multipleSelection[i].id + "@";
          }
          str = str.slice(0, -1);
          var data = { id_str: str };
          this.$api.getUser.extractDel(data).then((res) => {
            if (res.data.code == 200) {
              this.getNewsAll();
            }
          });
        }
      });
    },
    deleteNew(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var data = { id_str: id };
          this.$api.getUser.extractDel(data).then((res) => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getNewsAll();
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    showEditDialog(id) {
      this.myshow = true;
      this.editId = id;
      this.clickNum++;
    },
    reload() {
      this.getNewsAll();
    },
  },
  created() {
    this.getNewsAll();
  },
};
</script>
<style lang="less" scoped>
.tab_div {
  font-size: 12px;
}
</style>
